<template>
  <div>
      <el-button type="primary"  size="small" @click="addGroup">添加分组</el-button>
    <div v-if="groupListShow" >
      <group :data="market" :depth="0" type="market"></group>

      <group :data="unbanked" :depth="0" type="unbanked"></group>

      <group :data="custom" :depth="0" type="custom"></group>
    </div>
  </div>
</template>

<script>
    import {
        queryCustType1,
        saveCustType,
    } from '@/api/customer'
    import group from '@/components/customer/group.vue'
    export default {
        name: "groupList",
        data() {
            return {
                custTypeOptions: [],
                groupListShow: true,
                recursionShow: false,
                recursionType: 'add',
                form: {
                    pid: '',
                    name: ''
                },
                id:'',
                market: [], // 营销分组
                unbanked: [], // 未分组
                custom: [], // 自定义分组
                pid: 0
            }
        },
        components: {
            group
        },
        mounted() {
            this.bus.$on('openDialog', params => {
                this.recursionShow = true
                this.form.name = params.name
                this.recursionType = params.type
                this.id = params.id
                this.form.pid = params.parent
            })
            this.bus.$on('updata', () => {
                this.init()
            })
            this.init()
        },
        methods: {
            init() {
                this.groupListShow = false
                queryCustType1().then(res => {
                    this.market = []
                    this.market.push(res.data.data.market)
                    this.unbanked = []
                    this.unbanked.push(res.data.data.unbanked)
                    this.custom = res.data.data.custom
                    this.custTypeOptions = this.market.concat(this.custom)
                    this.groupListShow = true
                })
            },
            addGroup(){
              // 增加分组
                this.$prompt('请输入分组名称', '新增客户分组', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[\u4e00-\u9fffa-zA-Z0-9]{1,10}$/,
                    inputErrorMessage:"请输入1-10的字符"
                }).then(({ value }) => {
                    saveCustType(value, 0).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            })
                            this.recursionShow = false
                            // 刷新左侧菜单
                            this.bus.$emit('updataCustMenu')
                            this.init()
                        }
                    })
                })
            },
            closeDialog() {
                this.form.pid = [],
                this.form.name = ''
                this.recursionShow = false
            }
        }

    }
</script>

<style scoped lang="scss">
  .title {
    text-align: center;
    color: #409eff;
    font-size: 15px;
    margin-bottom: 20px;
  }
</style>
